<template>
  <div class="exam">
    <!-- 头部 -->
    <div class="exam_sub">
      <span class="title">{{typeKind[$route.query.kind]}}</span>
      <div class="sub_exit">
        <span class="save" @click="saveClick()">保存</span>
        <span class="submit" @click="submitClick()" ref="submit">提交</span>
      </div>
    </div>

    <div class="exam_area">
      <!-- 页面题号部分 -->
      <exam-total />

      <!-- 页面答题部分 -->
      <answer @timeOut="timeOutBySubmit" />
    </div>
  </div>
</template>

<script>
import answer from './childComps/answer';
import examTotal from './childComps/examTotal';

import Bus from '@/common/bus';

export default {
  name: 'StudentExam',
  data() {
    return {
      topicList: [],
      typeKind: ['作业', '考试'],
    };
  },
  components: {
    answer,
    examTotal,
  },
  mounted() {
    this._topic();
  },
  methods: {
    _topic() {
      // 单选题完成题题号数
      Bus.$on('radioTopic', (finishData) => {
        this.topicOk(finishData);
      });

      // 多选题完成题题号数
      Bus.$on('multipleTopic', (finishData) => {
        this.topicOk(finishData);
      });

      // 判断题完成题题号数
      Bus.$on('judgeTopic', (finishData) => {
        this.topicOk(finishData);
      });

      // 填空题完成题题号数
      Bus.$on('fillTopic', (finishData) => {
        this.topicOk(finishData);
      });

      // 综合题完成题题号数
      Bus.$on('synthesizeTopic', (finishData) => {
        this.topicOk(finishData);
      });
    },

    topicOk(data) {
      // 判断是否存在该对象
      for (let i = 0; i < this.topicList.length; i++) {
        if (this.topicList[i].id == data.id) {
          this.topicList.splice(i, 1);
        }
      }

      // 添加数据(判断该题是否完成)
      if (data.finish) {
        this.topicList.push(data);
      }
    },

    saveClick() {
      console.log(this.topicList);
      // 保存填写的内容
      // 1. 提交数据
      // for (const iter of this.topicList) {
      //   let item = this.$http.adornData({
      //     id: iter.id,
      //     submitAnswer: iter.value,
      //   });

      //   this.$http({
      //     url: this.$http.adornUrl(`/edu-task/s_saveStudentTask`),
      //     method: 'post',
      //     data: item,
      //   }).then(({ data }) => {
      //     if (data && data.code === 20000) {
      //       this.$message({
      //         message: '作业保存成功',
      //         type: 'success',
      //       });
      //     } else {
      //       this.$message.error('未能成功保存作业！');
      //     }
      //   });
      // }
      // alert('保存成功!!!');

      // // 2. 退出界面
      // this.$router.push('/studentCourse');
    },

    submitClick() {
      let flag = false; /* 标记是否跳转出去 */

      // 1. 获取题目
      console.log(this.topicList);

      // 2. 判断是否做完
      let msg = false;
      const count = document.querySelector('.count').innerHTML.split('：')[1]; /* 总题量 */
      if (this.topicList.length != count) {
        msg = confirm('你的题还没做完，是否确定提交');
      } else {
        msg = confirm('确定提交');
      }
      if (msg) {
        flag = true;
      } else {
        flag = false;
      }

      if (flag) {
        // 3. 判断是否为平时作业
        const title = document.querySelector('.title');
        if (title.innerHTML == '作业') {
          console.log('保存成功');
          Bus.$emit('submit');
        }

        // 4. 提交数据
        for (const iter of this.topicList) {
          let item = this.$http.adornData({
            id: iter.id,
            submitAnswer: iter.value,
          });

          this.$http({
            url: this.$http.adornUrl(`/edu-task/s_saveStudentTask`),
            method: 'post',
            data: item,
          }).then(({ data }) => {
            if (data && data.code === 20000) {
              this.$message({
                message: '作业提交成功',
                type: 'success',
              });
            } else {
              this.$message.error('未能成功保存作业！');
            }
          });
        }

        // 5. 退出界面
        this.$router.push('/studentCourse');
      }
    },

    timeOutBySubmit() {
      // 时间已到触发提交事件
      this.$refs['submit'].click();
    },
  },
  beforeDestroy() {
    Bus.$off('initTab');

    Bus.$off('radioTopic');
    Bus.$off('multipleTopic');
    Bus.$off('judgeTopic');
    Bus.$off('fillTopic');
    Bus.$off('synthesizeTopic');
  },
};
</script>

<style scoped>
.exam {
  position: relative;
  top: -25px;
  left: -86px;
  right: 0;
  width: 100vw;
  padding: 50px;
  z-index: 1000;
  background-color: #f2f4f7;
}

.exam .exam_sub {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  z-index: 100;
  background: #3a4357;
  text-align: center;
  line-height: 40px;
  color: #a8a8b3;
}
.exam_sub .sub_exit {
  float: right;
  width: 200px;
  height: inherit;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.exam_sub .sub_exit span {
  flex: 1;
  line-height: 40px;
  height: inherit;
  text-align: center;
}
.exam_sub .sub_exit span:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.exam_sub .sub_exit .submit {
  background-color: #3a8bff;
}

.exam .exam_area {
  /* margin: 30px 0 0 50px; */
  margin-top: 30px;
  display: flex;
  justify-content: center;
  user-select: none;
}
</style>